<template>
	<s-layout class="wallet-wrap" title="门店奖励业绩">
		<su-sticky>
			<!-- 年份选择 -->
			<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
				<picker mode="date" :value="state.date" :end="state.today" @change="onChangeTime" fields="year">
					<button class="ss-reset-button date-btn">
						<text>{{state.dateFilterText}}</text>
						<text class="cicon-drop-down ss-seldate-icon"></text>
					</button>
				</picker>
			</view>
		</su-sticky>
		<view class="ss-p-t-10" style="background-color: #fff;height: 100vh;">
			<view class="wallet-list ss-p-y-20 ss-p-x-30" v-for="(item,index) in state.list" :key="index">
				<view class="ss-flex ss-row-between">
					<text class="title ss-line-1 ">{{ item.month }}月</text>
					<view class="money ss-flex">
						<text class="minus">本月业绩：</text>
						<text class="add">{{ item.money }}</text>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	import _ from 'lodash';

	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');
	// 数据
	const state = reactive({
		date: [],
		list: [],
		today: '',
		dateFilterText: '年份选择'
	});

	const userInfo = computed(() => sheep.$store('user').userInfo);

	async function getList() {
		let res = await sheep.$api.commission.storePerformance({
			year: state.date,
		});
		if (res.code === 1) {
			state.list = res.data
		}
	}
	onLoad(async (options) => {
		state.today = dayjs().format('YYYY');
		state.date = state.today;
		getList();
	});

	function onChangeTime(e) {
		state.date = e.detail.value;
		state.dateFilterText = state.date
		getList();
	}
</script>

<style lang="scss" scoped>
	// 筛选
	.filter-box {
		height: 84rpx;
		background-color: $bg-page;


		.date-btn {
			background-color: $white;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx 0 30rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: $dark-6;

			.ss-seldate-icon {
				font-size: 50rpx;
				color: $dark-9;
			}
		}
	}


	// 列表
	.wallet-list {
		margin: 30rpx;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: #ffff;
		box-shadow: 0 0 8rpx 8rpx #f6f6f8;

		.title {
			font-size: 28rpx;
			color: #000;
			width: 100rpx;
			font-weight: 500;
		}

		.money {
			font-size: 28rpx;

			.add {
				color: #E84010;
			}

			.minus {
				color: #979797;
			}
		}
	}
</style>